<template>
  <div>
    <van-row class="head_sculpture">
      <van-col   span="6">
        <van-image  v-if="$store.state.username" span="6"
          round
          fit="cover"
          width="6rem"
          height="6rem"
          src="https://q.qlogo.cn/g?b=qq&nk=1452074523&s=100"
      
        />
      
         <van-image v-else  span="6"
          round
          fit="cover"
          width="6rem"
          height="6rem"
          src="  https://img2.baidu.com/it/u=3190295034,362319691&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"
      
        />
      </van-col>
      <van-col span="14">
        <h3 class="van-ellipsis">心动会员用户</h3>
        <p class="van-ellipsis">官网：https://gitee.com/chenfhua/chenfuhua-vue-movie</p>
      </van-col>
      <van-col span="4"
        ><van-icon name="qr" color="#000" size="25" /> <van-icon name="arrow"  color="#111" size="24"
      /></van-col>
      <van-col span="24">
        <p class="van-ellipsis">当前日期 : <span>{{getTimeer()}}</span></p>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "VueMovieHeadCard",

  data() {
    return {username:''};
  },

  mounted() {},

  methods: {
    edit(){
this.$store.commit("editmyname",this.username)
    },
    getTimeer(){
       // 格式化日期 年月日 
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        return year + '年' + month + '月' + dates + '日 ' + arr[day]
    }
  },
};
</script>

<style lang="less" scoped>
.head_sculpture {
  margin: 0 10px;
  margin-top: 15px;
  height: 150px;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(to right, #21232c, #c06bfd);
  color: #fff;
  .van-col {
    height: 6rem;
  }
  .van-col:nth-child(2) {
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
    h3 {
      color:red;
      line-height: 3rem;
      font-family: serif;
    }
    height: 6rem;
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
  .van-col:nth-child(3) {
    line-height: 6rem;
    text-align: center;
    border-bottom: 1px solid #ccc;

  }
  .van-col:nth-child(4) {
    p {
      margin-top: 20px;
      height:50px;
      line-height:50px;
      text-align: center;
      color: #F7F8F8;
      font-weight: 300;
      span{
        color: #fff;
      }
    }
  }
}
</style>